<template>
  <div class="column items-center">
    <div :style="{width: width + 'px', height: height + 'px'}">
      <vue-cropper ref="cropper" v-bind="option" ></vue-cropper>
    </div>
    <div class="q-py-md q-gutter-xs">
      <q-btn label="上传" @click="addImageFile" color="primary" />
      <q-btn icon="zoom_in" @click="changeScale(1)" color="primary" />
      <q-btn icon="zoom_out" @click="changeScale(-1)" color="primary" />
      <q-btn icon="rotate_left" @click="rotateLeft" color="primary" />
      <q-btn icon="rotate_right" @click="rotateRight" color="primary" />
    </div>
    <input ref="upload" style="display: none;" type="file" accept="image/*" @change="fileAdded" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';

export default defineComponent({
  name: 'CropperAvatar',
  components: {
    VueCropper
  },
  props: {
    width: { // 编辑区域宽度
      type: Number,
      default: 300
    },
    height: { // 编辑区域高度
      type: Number,
      default: 300
    },
    img: { // 头像地址
      type: String,
      default: ''
    }
  },
  emits: ['update:img'],
  data () {
    return {
      option: {
        img: '', // '/images/avatar.png',
        size: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图
        outputType: 'png', // 裁剪生成图片的格式
        canMove: true, // 上传图片是否可以移动
        fixedBox: false, // 固定截图框大小
        original: false, // 上传图片按照原始比例渲染
        canMoveBox: true, // 截图框能否拖动
        autoCrop: true, // 是否默认生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 200, // 默认截图宽度
        autoCropHeight: 150, // 默认截图高度
        centerBox: false, // 固定截图框大小不能超过图片本身大小
        high: false, // 开启图片质量检测
        cropData: {}, // 截图框位置信息
        enlarge: 1, // 图片质量检测，默认1，
        mode: 'contain', // 图片渲染方式
        maxImgSize: 3000, // 限制图片最大宽度和高度
        limitMinSize: [50, 50], // 限制图片最小宽度和高度
        fixed: true, // 固定截图框宽高比例
        fixedNumber: [1, 1], // 固定截图框宽高比例
        fillColor: '' // 背景色
      }
    }
  },
  mounted () {
    this.option.img = this.img;
  },
  methods: {
    addImageFile () {
      this.$refs.upload.dispatchEvent(new MouseEvent('click'));
    },
    fileAdded (e) {
      const file = e.srcElement.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      if (!window.FileReader) return; // 支持FileReader

      // 创建filereader对象
      const reader = new FileReader();

      const self = this;
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }

        self.option.img = data;
      };

      reader.readAsArrayBuffer(file); // // 转化为blob
    },
    upload () { // 上传
      return new Promise((resolve, reject) => {
        this.$refs.cropper.getCropBlob(data => {
          const token = this.$q.localStorage.getItem('consumerToken');

          const formData = new FormData();
          formData.append('file', data, 'avatar.png');

          const config = {
            headers: {
              'Content-Type': 'multipart/form-data',
              conAuth: token
            }
          };

          this.$axios.post('/c/shop/upload', formData, config).then(({ data }) => {
            this.$emit('update:img', data.images[0].url);
            resolve(data.images[0].url);
          });
        });
      });
    },
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight () {
      this.$refs.cropper.rotateRight()
    }
  },
  watch: {
    img (val) {
      this.option.img = val;
    }
  }
});
</script>
